<template>
  <div class="not-found">
    <h1>404 Not Found</h1>
    <p>您访问的页面不存在</p>
    <p>{{ second }}秒后跳转到上一级页面...</p>
  </div>
</template>

<script>
export default {
  name: "NotFound",
};
</script>

<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";

const $router = useRouter();

const second = ref(5);

onMounted(() => {
  const timer = setInterval(() => {
    second.value--;
    if (second.value <= 1) {
      clearInterval(timer);
      $router.back();
    }
  }, 1000);
});
</script>

<style scoped lang="scss">
.not-found {
  width: 100vw;
  height: 100vh;
  padding-top: 30px;
  background: url("../../assets/404.jpg") no-repeat;
  background-size: cover;
  p,
  h1 {
    text-align: center;
    color: #fff;
  }
}
</style>
